<template>
  <view class="my-settle">
    <label class="radio" @click="handleRadioClick">
      <radio value=""  color="#C00000" :checked="isFullChecked"/><text>全选</text>
    </label>
    
    <view class="total">
      合计：<text class="total-price">￥{{checkedTotalPrice}}</text>
    </view>
    
    <view class="btn-settle" @click="handleSettle">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import { mapGetters,mapMutations,mapState } from 'vuex'
  export default {
    name:"my-settle",
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedTotalPrice']),
      ...mapGetters('m_user',['addressStr']),
      ...mapState('m_user',['token']),
      isFullChecked(){
        return this.checkedCount === this.total
      }
    },
    data() {
      return {
        seconds: 3,
        timer: null
      };
    },
      
    methods:{
      ...mapMutations('m_cart',['updateAllGoodsState']),
      ...mapMutations('m_user',['updateRedirectInfo']),
      
      //全选/反选
      handleRadioClick(){
        this.updateAllGoodsState(!this.isFullChecked)
      },
      
      //处理结算
      handleSettle(){
        if(!this.checkedCount){
        return uni.$showMessage('请选择要结算的商品！')
      }
      if(!this.addressStr){
        return uni.$showMessage('请选择收货地址！') 
      }
      if(!this.token){
        // return uni.$showMessage('请先登录！') 
        return this.delayNav() 
      }
    },
    
    //延时导航
    delayNav(){
      this.seconds = 3
      this.showTips(this.seconds)
      this.timer = setInterval(() => {
        this.seconds--
        if(this.seconds <= 0){
          clearInterval(this.timer)
          uni.switchTab({
            url:'/pages/my/my',
            success: () => {
              this.updateRedirectInfo({
                openType:'switchTab',
                from:'/pages/cart/cart'
              })
            }
          })
          return
        }
        this.showTips(this.seconds)
      } ,1000)
    },
    
    //展示倒计时提示消息
    showTips(n){
      uni.showToast({
        icon:'none',
        title:'请登录后再结算！' + n + '秒之后自动跳转到登录页',
        mask:true,
        duration:1500
      })
    }
  },
  }
</script>

<style lang="scss">
.my-settle{
  position:fixed;
  // -window-bottom:50px;
   bottom:var(--window-bottom);
  left:0;
  width:100%;
  height:50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:14px;
  padding:0 5px;
  .radio{
    display: flex;
    align-items: center;
    
  }
  .total-price{
    color:#C00000;
    font-weight:700;
  }
  
  .btn-settle{
    height:50px;
    color:white;
    background-color: #C00000;
    line-height: 50px;
    padding:0 10px;
    min-width:100px;
    text-align: center;
  }
}
</style>
